<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">个人信息</span>
                </div>

                <div slot="right">
                    <i class="mod-icon" v-if="isReadonly"></i>
                    <span class="title" @click="onClickRight()">{{rightText}}</span>
                </div>
            </van-nav-bar>
        </div>

        <!--个人信息-->
        <div class="module-box">
            <van-cell-group>
                <van-field label="姓名" v-model="personInfo.personName" readonly :disabled="!isReadonly" input-align="right"/>

                <van-field label="手机号码" v-model="personInfo.personPhone" :readonly="isReadonly" input-align="right">
                    <span v-if="!isReadonly && showCountdown" class="get-captcha" slot="button">{{second}}秒后重新获取</span>
                    <span v-else-if="!isReadonly && !showCountdown" class="get-captcha" slot="button" @click="getCaptcha()">获取验证码</span>
                </van-field>

                <van-field v-if="!isReadonly" v-model="captcha" label="短信验证码" input-align="right"
                           placeholder="未修改手机号,则无需填写"/>

                <van-field label="小区名称" :value="$Cookies.get('communityName')&&$Cookies.get('communityName')!='null' ? $Cookies.get('communityName') : ''" readonly :disabled="!isReadonly" input-align="right"/>

                <van-field label="详细地址" v-model="personInfo.detailAddress" :readonly="isReadonly" input-align="right" placeholder="待完善"/>


                <van-field label="户籍所在地" input-align="right">
                    <div slot="input" @click="clickHukou()">
                        <span>{{personInfo.nativePlace ? personInfo.nativePlace : '待完善'}}</span>
                    </div>
                </van-field>

                <div v-if="showMoreInfo">
                    <van-field label="最近回沪时间" input-align="right">
                        <div slot="input" @click="clickData()">
                            <span>{{ getDate(personInfo.backTime) }}</span>
                        </div>
                    </van-field>

                    <van-field label="回沪交通方式" input-align="right">
                        <div slot="input" @click="clickTraffic()">
                            <span>{{personInfo.traffic ? personInfo.traffic : '待完善'}}</span>
                        </div>
                    </van-field>

                    <!--当是火车的时候，需要填写车次-->
                    <van-field v-if="personInfo.traffic=='火车'" label="车次" v-model="personInfo.trainNumber" :readonly="isReadonly" input-align="right" placeholder="待完善"/>
                </div>

                <div class="more-info" @click="clickMoreInfo()">{{!showMoreInfo ? "更多信息" : "收起"}}</div>
            </van-cell-group>


            <div class="btn-box" v-if="!isReadonly">
                <van-button block @click="submit()">提交</van-button>
            </div>

            <!--<div class="btn-logout" v-if="isReadonly">-->
                <!--<van-button block @click="logOut()">注销</van-button>-->
            <!--</div>-->
        </div>

        <!--温馨提示-->
        <div class="module-box tips-info">
            <div class="title">温馨提示：</div>
            <p>该小区未纳入系统管理</p>
            <p>如果是管理员，可以加入小区管理</p>
            <div v-if="$Cookies.get('userType') == '3000'" class="activate" @click="activateVillage()">激活小区！</div>


            <!--我的二维码-->
            <div class="my-QRCode">
                <div class="qrcode" ref="personQRcode"></div>
                <div class="title">我的二维码</div>
            </div>
        </div>


        <!--户口所在地上拉弹框-->
        <van-action-sheet v-model="showHukouBox" title="选择户口所在地">
            <van-area :columns-num="2" :area-list="hukouList" @confirm="hukouConfirm" @cancel="hukouCancel"/>
        </van-action-sheet>

        <!--最近回沪时间上拉弹框-->
        <van-action-sheet v-model="showDateBox" title="选择最近回沪时间">
            <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate"
                                 @confirm="dateConfirm" @cancel="dateCancel"/>
        </van-action-sheet>

        <!--回沪交通方式上拉弹框-->
        <van-action-sheet v-model="showTrafficBox" title="回沪交通方式">
            <van-picker show-toolbar :columns="trafficData" @cancel="trafficCancel" @confirm="trafficConfirm"/>
        </van-action-sheet>

    </div>
</template>

<script>
    import {NavBar, CellGroup, Field, Button, Area, ActionSheet, DatetimePicker, Picker, Toast} from 'vant';
	import area from '../assets/js/area';

    export default {
        name: 'personalInfo',

        components: {
            [NavBar.name]: NavBar,
			[CellGroup.name]: CellGroup,
			[Field.name]: Field,
			[Button.name]: Button,
			[Area.name]: Area,
			[ActionSheet.name]: ActionSheet,
			[DatetimePicker.name]: DatetimePicker,
			[Picker.name]: Picker,
			[Toast.name]: Toast,
        },

        props: {},

        data() {
            return {
				showMoreInfo: false,       //展示更多
				rightText: '修改',
				isReadonly: true,   //是否只读

				timer: null,                //验证码计时器
				showCountdown: false,       //是否显示倒计时
				second: 60,               //重新获取剩余秒数

				//个人信息
				personInfo:{
					personName: '',
					personPhone: '',
					detailAddress: '',
                },
				personInfoCopy: {},      //点击修改前的个人信息备份
				captcha: '',   //短信验证码,

				hukouList: area,
				showAreaBox: false,
				showHukouBox: false,


				hukouData: [
					{code: '', name: ''},
					{code: '', name: ''},
				],
				backTime: '',            //最近回沪时间
				trafficInfo: '',   //回沪交通方式
				showDateBox: false,
				minDate: new Date(2019, 0, 1),
				maxDate: new Date(2030, 11, 31),

				trafficData: ['火车','自驾','公共汽车','其他'],
				showTrafficBox: false,
            }
        },

        mounted() {
			this.getPersonInfo();   //获取个人信息

			//成生个人二维码
			this.$nextTick(() => {
				this.showPersonQRcode();
			})
        },

        methods: {
			//点击返回
			onClickLeft(type){
				this.$router.go(-1);
			},

            //时间格式化
			getDate(backTime){
				if(!backTime){
					return '待完善';

                }else if(typeof backTime=='string' && backTime.length == 19){
					return backTime.slice(0,10);

                }else{
                	return this.$utils.date(backTime);
                }
            },

			//点击更多信息
			clickMoreInfo(){
				this.showMoreInfo = !this.showMoreInfo;
			},

        	//点击注销
			logOut(){
				this.$Cookies.remove('personName');
				this.$Cookies.remove('personId');
				this.$Cookies.remove('personPhone');
				this.$Cookies.remove('personRole');
				this.$Cookies.remove('communityName');
				this.$Cookies.remove('communityId');
				this.$Cookies.remove('userType');

				if(parent.WeixinJSBridge){
					parent.WeixinJSBridge.call('closeWindow');    //关闭当前网页
				}else{
					this.$router.push('/login');
                }
            },

			//生成个人二维码
			showPersonQRcode(){
				this.$refs.personQRcode.innerHTML= '';   //移除老的二维码

				let text = JSON.stringify({
					QRCodeType: 'personInfo',
					personPhone: this.$Cookies.get('personPhone'),
					personName: this.$Cookies.get('personName')
				});

				text = encodeURI(text);    //对二维码内容进行转码

				new this.$QRCode(this.$refs.personQRcode, {
					text: text,
					width: 200,
					height: 200,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: this.$QRCode.CorrectLevel.M,   //容错率，L/M/H
				})
			},

			//点击获取验证码
			getCaptcha(){
				if(this.personInfo.personPhone == this.$Cookies.get('personPhone')){
					Toast('手机号未修改');
					return;
				}

				this.$axios.post(this.$api.sendSmsCaptcha, {
					telNo: this.personInfo.personPhone,
					captchaType: 'register',

				}).then(success => {
					if(success.data.code == '200'){
						Toast('发送成功');
						this.startCountdown();
					}
				}).catch(error => {

				})
			},
			//开始倒计时
			startCountdown(){
				this.showCountdown = true;
				this.second = 60;
				clearInterval(this.timer);

				this.timer = setInterval(() => {
					if(this.second == 1){
						clearInterval(this.timer);
						this.showCountdown = false;
					}else{
						this.second -= 1;
					}
				},1000)
			},


        	//获取个人信息
			getPersonInfo(){
				this.$axios.get(this.$api.queryPersonInfo, {
					params: {
						personPhone: this.$Cookies.get('personPhone'),
					}
				}).then(success => {
					if(success.data.code == '200'){
						this.personInfo = success.data.data[0];
					}
				}).catch(error => {

				})
            },

			//修改个人信息
			submit(){
                //必填信息验证
				if(!this.personInfo.personPhone || !this.personInfo.detailAddress){
					Toast('请录入必填信息');
					return;
				}
				if(this.personInfo.personPhone != this.$Cookies.get('personPhone') && !this.captcha){
					Toast('请输入验证码');
					return;
				}

				this.$axios.post(this.$api.updatePerson, {
                    personId: this.personInfo.personId,
                    personPhone: this.personInfo.personPhone,
                    captcha: this.captcha,
					detailAddress: this.personInfo.detailAddress,
                    nativePlace: this.personInfo.nativePlace,
                    backTime: this.$utils.date(this.personInfo.backTime),
                    traffic: this.personInfo.traffic,
                    trainNumber: this.personInfo.trainNumber,

				}).then(success => {
					if(success.data.code == '200'){
						Toast('操作成功');
						this.isReadonly = true;
						this.rightText = '修改';
						this.$Cookies.set('personPhone', this.personInfo.personPhone);  //更新手机号
						this.showPersonQRcode();    //重新生成个人二维码
					}
				}).catch(error => {

				})
			},

			//点击激活小区
			activateVillage(){
				this.$router.push('/activateVillage');
			},

            //点击修改或取消
			onClickRight(){
            	if(this.isReadonly){
					this.isReadonly = false;
					this.rightText = '取消';
					this.personInfoCopy = {...this.personInfo};    //点击修改备份数据
                }else{
					this.isReadonly = true;
					this.rightText = '修改';
					this.personInfo = {...this.personInfoCopy};    //点击取消还原数据
                }
			},


			//点击选择户口所在地
			clickHukou(){
				if(!this.isReadonly){
					this.showHukouBox = true;
                }
			},
			hukouConfirm(data){
				this.personInfo.nativePlace = data[0].name + data[1].name;
				this.showHukouBox = false;
			},
			hukouCancel(){
				this.showHukouBox = false;
			},

			//点击选择返沪时间
			clickData(){
				if(!this.isReadonly){
					this.showDateBox = true;
				}
			},
			dateConfirm(date){
				this.showDateBox = false;
				this.personInfo.backTime = date;
			},
			dateCancel(){
				this.showDateBox = false;
			},

			//点击回沪交通方式
			clickTraffic(){
				if(!this.isReadonly){
					this.showTrafficBox = true;
				}
			},
			trafficConfirm(data){
				this.showTrafficBox = false;
				this.personInfo.traffic = data;

				//选择非火车清空车次
				if(data !== '火车'){
					this.personInfo.trainNumber = '';
                }
			},
			trafficCancel(){
				this.showTrafficBox = false;
			},

        },
    }
</script>

<style lang="scss" scoped>
    /*更多信息*/
    .more-info{
        font-size: 15px;
        text-align: center;
        color: #999999;
        padding: 16px 10px;
    }

    /*二维码样式*/
    .qrcode{
        width: 200px;
        margin: 0 auto;
        margin-top: 20px;
        display: inline-block;
    }

    .mod-icon{
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url("../assets/images/mod-icon.png") no-repeat;
        background-size: cover;
        vertical-align: middle;
    }

    /*表单样式覆盖*/
    .van-cell-group{
        background-color: transparent;

        &::after {
            border: none;
        }

        .van-cell{
            background-color: transparent;
            border-bottom: 1px solid #ebedf0;
            padding-top: 16px;
            padding-bottom: 16px;
            font-size: 15px;
            color: #999999;

            &::after {
                border: none;
            }
        }
    }

    /*获取验证码样式*/
    .get-captcha{
        font-size: 15px;
        color: #61dda3;
    }

    /*温馨提示*/
    .tips-info{
        padding: 16px 12px;
        font-size: 15px;
        color: #222222;

        .title{
            font-weight: bold;
        }
        p{
            margin: 0;
            margin-top: 12px;
        }

        .activate{
            font-size: 16px;
            font-weight: bold;
            color: #61dda3;
            text-decoration: underline;
            margin-top: 4px;
        }
    }

    /*我的二维码*/
    .my-QRCode{
        padding: 10px;
        text-align: center;

        .title{
            font-size: 18px;
            font-weight: bold;
            color: #222222;
            margin-top: 4px;
        }
    }

    /*提交按钮*/
    .btn-box{
        width: 94%;
        margin: 0 auto;
        margin-top: 10px;
        padding-bottom: 20px;

        .van-button--default {
            background: linear-gradient(to bottom right, #61dda3, #07b6d5);
            border-radius: 8px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
    }

    .btn-logout{
        width: 94%;
        margin: 0 auto;
        margin-top: 10px;
        padding-bottom: 20px;

        .van-button--default {
            background: #e90b0b;
            border-radius: 8px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
    }
</style>

